<template>
	<view>
		<u-mask :show="show" @click="closeMask">
			<view class="container">
				<view class="content">
					<view class="umask">
						<view class="rect" @tap.stop>
							<view class="tit">电话验证</view>
							<view class="uinput">
								<u-input v-model="phone" :border="true" height="100" placeholder="请输入手机号码"
									maxlength="11" clearable input-align="left" />
							</view>
							<view class="toast">
								<u-input class="verificationCode" v-model="verificationCode" :border="true" height="100"
									placeholder="请输入验证码" maxlength="6" clearable input-align="left" />
								<view @click.prevent="getVerificationCode" :class="countDown == 0?'buttonText':'none'">
									{{buttonText}}</view>
							</view>
							<view class="verifyCode" size="mini" @click.prevent="verifyCode">验证</view>
						</view>
					</view>
				</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	export default {
		name: "validation-input",
		props: {
			show: {
				type: Boolean,
				required: true
			}
		},
		data() {
			return {
				verificationCode: '',
				type: 'text',
				border: true,
				// show: Boolean,
				phone: '',
				buttonText: '获取验证码',
				disableBtn: false,
				countDown: 0
			};
		},
		methods: {
			closeMask() {
				this.$emit('show', false);
			},
			// 发送请求 获取验证码
			getVerificationCode() {
				// 发送请求，向服务器请求发送验证码
				// 在请求返回成功后，将按钮设置为不可用状态，并开始倒计时
				this.disableBtn = true;
				this.countDown = 60;
				let timer = setInterval(() => {
					if (this.countDown > 0) {
						this.countDown--;
						this.buttonText = `${this.countDown}s后重新获取`;
					} else {
						clearInterval(timer);
						this.countDown = 0
						this.disableBtn = false;
						this.buttonText = '获取验证码';
					}
				}, 1000);
			},
			// 请求 验证是否正确
			verifyCode() {
				// 发送请求，向服务器验证验证码是否正确
				// 如果验证成功，则可以执行一些其他操作，例如将用户的手机号码保存到本地存储中
			},
		}
	}
</script>

<style lang="scss">
	.container {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.content {
		width: 700upx;
		background-color: #fff;
		border-radius: 8upx;
	}

	.umask {
		padding: 20upx 20upx;

		.rect {
			background-color: #fff;
			.tit{
				text-align: left;
				margin-top: -20upx;
			}
			.toast {
				margin: 20upx 0;
				display: flex;
				justify-content: space-between;

				.verificationCode {
					width: 58%;
				}

				.buttonText {
					display: flex;
					justify-content: center;
					width: 40%;
					align-items: center;
					background-color: #1E90FF;
					color: #fff;
					font-size: 30upx;
					border-radius: 8upx;
				}

				.none {
					display: flex;
					background-color: #1E90FF;
					justify-content: center;
					width: 40%;
					color: #fff;
					font-size: 30upx;
					border-radius: 8upx;
				}
			}

			.verifyCode {
				width: 100%;
				text-align: center;
				background-color: #1E90FF;
				color: #fff;
				border-radius: 8upx;
			}
		}
	}
</style>